<%--
  Created by IntelliJ IDEA.
  User: 13095
  Date: 2024/9/21
  Time: 15:56
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html; charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set value="${pageContext.request.contextPath}" var="path"></c:set>
<html>
<head>
    <meta charset="UTF-8">
    <title>骑手注册</title>
    <link rel="stylesheet" href="${path}/static/css/login.css">
</head>
<body>
<div class="container">
    <div class="card">
        <h1>骑手注册</h1>
        <c:if test="${not empty param.error}">
            <div class="error">${param.error}</div>
        </c:if>
        <form action="${path}/runner/register" method="post" enctype="multipart/form-data">
          <label style="margin: 0;padding:0;">注册地区</label><label style="margin: 0;padding: 0">省:</label>
            <select name="province" id="province" style="margin: 0;padding: 0">
                <c:forEach items="${requestScope.provinceList}" var="province">
                    <option value="${province.id}">${province.name}</option>
                </c:forEach>
            </select>&nbsp;&nbsp;
            <label style="margin: 0;padding: 0;">市:</label>
            <select name="city.id" id="city">
                <c:forEach items="${requestScope.beijingList}" var="city">
                    <option value="${city.id}">${city.name}</option>
                </c:forEach>
            </select>
            <label>用户名:</label>
            <input type="text" name="runnerName" required placeholder="请输入用户名" maxlength="15">
            <label>手机号:</label>
            <input type="text" name="phone_number" required placeholder="必填,请输入手机号" maxlength="15">
            <label>密码:</label>
            <input type="password" name="password" required placeholder="请输入密码" maxlength="255">
            <label>头像:</label>
            <input type =file name="runnerFace" id="face" onchange="previewImage()">
            <br>
            <img src="" style="border-radius: 50%" id="facePre">
            <input type="submit" value="注册">
        </form>
        <div class="footer">
            <p>已有账号？ <a href="${path}/runner/login">登录</a></p>
        </div>
    </div>
</div>
</body>
<script src="${path}/static/js/jquery-3.2.1.min.js"></script>
<script>
    $(function () {
        $("#province").change(showCity);

    })
function showCity() {
var province_id = $("#province").val();
var city = $("#city");
$.ajax({
url: "/runner/searchCity",
data: {provinceID: province_id},
type: "get",
success: function (mes) {
city.html("");
for (var cities of mes) {
var opt = $("<option>");
    opt.val(cities.id);
    opt.html(cities.name);
    city.append(opt);
    }
    },
    error: function () {
    alert('获取城市列表失败，请稍后重试');
    }
    });
    }
    </script>
<script>
    // 头像预览函数
    function previewImage() {
        var input = document.getElementById('face');
        var img = document.getElementById('facePre');
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                img.src =  e.target.result;
                img.width=50;
                img.height=50;
            };
            reader.readAsDataURL(input.files[0]);

        }
    }
</script>
</html>